<template>
  <div id="container">
    <el-container>
      <el-header class="header hidden-sm-and-down">
        <div class="h2">关于我们</div>
        <!--面包屑导航-->
        <div class="breadcrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: this.$route.path }">关于我们</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-header>
      <!--指南选项-->
      <el-tabs :class="[flag?'phone-tab':'tab'] " :tab-position="tabPosition" v-model="activeName">
        <el-tab-pane
          :span="24"
          :offset="0"
          :label="item.title"
          :name="item.index"
          v-for="item in listdata"
          :key="item.id"
        >
          <h1 class="title-header">{{item.title}}</h1>
          <p>{{item.content}}</p>
          <span>{{item.time | dateFormat}}</span>
        </el-tab-pane>
      </el-tabs>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "0",
      tabPosition: "left",
      flag: false, //判断移动端还是pc端
      listdata: [],
    };
  },
  watch: {
    // 监听路由地址变化重置导航栏
    "$route.path": function(newVal, oldVal) {
      this.activeName = "0";
    }
  },
  beforeMount() {
    //首次进入时
    if (window.screen.width <= 768 || document.body.clientWidth <= 768) {
      this.tabPosition = "top";
      this.flag = true;
    }
    //窗口大小改变自适应响应
    window.addEventListener("resize", () => {
      if (window.screen.width <= 768 || document.body.clientWidth <= 768) {
        this.tabPosition = "top";
        this.flag = true;
      } else {
        this.tabPosition = "left";
        this.flag = false;
      }
    });
  },
  mounted() {
    this.getHelplist();
  },
  methods: {
    //获取指南
    getHelplist() {
      this.$axios
        .get("/api/article/queryArticleListByPlace/4")
        .then(res => {
          this.listdata = res.data.list;
        })
        .catch(err => {
          this.$message.error("获取列表失败");
        });
    }
  }
};
</script>

<style lang="scss" scoped>
#container {
  max-width: 1200px;
  margin: 10px auto;
  border: 1px solid #f6f4f0;
  .header {
    display: flex;
    width: 100%;
    height: 20px;
    justify-content: space-between;
    .h2 {
      color: #0075a9;
      border-bottom: 5px double #0075a9;
      margin: 10px 0;
      font-size: 1.25rem;
      font-weight: bold;
    }
    .breadcrumb {
      margin: 20px 0;
    }
  }
  .tab {
    display: flex;
    width: 100%;
    min-height: 600px;
    margin: 0 auto;
    .el-tabs__item:hover {
      background: #0075a9;
      color: #ffffff;
    }
    .el-tabs__item.is-active {
      background: #0075a9;
      color: #ffffff;
    }
    .el-tabs__active-bar {
      background-color: #0075a9;
    }
    .title-header {
      font-weight: bold;
      text-align: center;
      width: 1067px;
      margin-top: 20px;
    }
    p {
      margin: 0 auto;
      margin-top: 20px;
      text-indent: 2em;
      line-height: 24px;
      letter-spacing: 1px;
    }
    span {
      float: right;
      margin-top: 20px;
      margin-right: 10px;
    }
  }
}
@media screen and (max-width: 768px) {
  .el-container {
    width: 100%;
    margin: 0;
    /deep/ .el-tabs__item {
      //scoped穿透
      line-height: 44px;
      padding: 0 10px;
    }
    /deep/ .el-tabs__nav-prev {
      font-size: 18px;
    }
    /deep/ .el-tabs__nav-next {
      font-size: 18px;
    }
    .phone-tab {
      width: 100%;
      .title-header {
        text-align: center;
      }

      p {
        margin-top: 20px;
        text-indent: 2em;
        letter-spacing: 0.4px;
      }
      span {
        float: right;
        margin-top: 20px;
        margin-right: 10px;
      }

      .el-tabs__item:hover {
        background: #0075a9;
        color: #ffffff;
      }
      .el-tabs__item.is-active {
        background: #0075a9;
        color: #ffffff;
      }

      .el-tabs__active-bar {
        background-color: #0075a9;
      }
    }
  }
}
</style>
